<div class="pannel">
    <div class="pannel-head">
        <p>
            <span class="title">未修复漏洞</span>
            <span class="count">总计( <font style="color: #00A4FF;">22</font> ), 高危(<font style="color: #FF5A5A;">22</font>), 中危(<font style="color: #333;">22</font>), 低危(<font style="color: #FF5A5A;">22</font>)</span>
        </p>
        <div>
            <button nz-button nzType="default" nzShape="round"><i nz-icon type="delete"></i> 删除</button>
            <button nz-button nzType="primary" nzShape="round"><i nz-icon type="alert"></i> 漏洞通报</button>
            <button nz-button nzType="primary" nzShape="round"><i nz-icon type="insurance"></i> 修复核查</button>
            <button nz-button nzType="primary" nzShape="round" (click)='getToCsv()'><i nz-icon type="vertical-align-bottom"></i> 导出列表</button>
        </div>
    </div>
    <div class="pannel-body">
        <div class="pannel-filter">
            <div class="pannel-filter-left">
            </div>
            <div class="pannel-filter-right">
                <nz-input-group [nzSuffix]="suffixIconSearch">
                    <input type="text" [(ngModel)]="pages.name" nz-input placeholder="请输入漏洞名或CVE编号" />
                </nz-input-group>
                <ng-template #suffixIconSearch>
                    <i nz-icon type="search"  (click)='search()'></i>
                </ng-template>
            </div>
        </div>
        <div>
            <nz-table class="pannel-body-table" #nzTable [nzData]="dataList" [nzShowPagination]="true" [nzLoading]="tableLoading" [nzFrontPagination]="false" [nzPageIndex]="pages.pageNo" [nzTotal]="pages.total" [nzPageSize]="pages.pageSize" [nzPageSizeOptions]="[10,20,30,40,50]" [nzShowQuickJumper]="true" [nzShowSizeChanger]="true" [nzShowTotal]="totalTemplate">
                <thead>
                    <tr>
                        <th>ip地址</th>
                        <th>漏洞名称</th>
                        <th> CVE编号</th>
                        <th>漏洞类型名称</th>
                        <th>漏洞等级</th>
                        <th>企业名称</th>
                        <th>漏洞地址</th>
                        <th>发现时间</th>
                        <th>通报时间</th>
                        <th> MAC地址</th>
                        <th> 备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of nzTable.data">
                        <td>{{ data.ip }}</td>
                        <td>{{ data.name }}</td>
                        <td>{{ data.cveId }}</td>
                        <td>{{ data.typeName }}</td>
                        <td>
                            <nz-tag *ngIf="data.level === 'Low'" [nzColor]="'#00A4FF'">低危</nz-tag>
                            <nz-tag *ngIf="data.level === 'Medium'" [nzColor]="'#FFA45A'">中危</nz-tag>
                            <nz-tag *ngIf="data.level === 'High'" [nzColor]="'#FF5A5A'">高危</nz-tag>
                        </td>
                        <td>{{ data.enterpriseName }}</td>
                        <td>{{ data.url }}</td>
                        <td>{{ data.discoverTime }}</td>
                        <td>{{ data.noticeTime }}</td>
                        <td>{{ data.macAddr }}</td>
                        <td>{{ data.remark }}</td>
                    </tr>
                </tbody>
            </nz-table>
            <ng-template #totalTemplate let-total> 共{{ total }}条</ng-template>
        </div>
    </div>
</div>
